<template>
	<view class="tabs" @click="handleClick($event)">
		<view :class="current === '1' ? 'active' : ''" data-index='1'>全部</view>
		<view :class="current === '2' ? 'active' : ''" data-index='2'>待成团</view>
		<view :class="current === '3' ? 'active' : ''" data-index='3'>已成团</view>
		<view :class="current === '4' ? 'active' : ''" data-index='4'>拼团失败</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: '1'
			}
		},
		methods: {
			handleClick(e) {
				const index = e.target.dataset.index;
				if(index !== this.current) {
					this.current = index;
					this.$emit('change', index);
				}
			}
		},
		mounted() {
			
		}
	}
	
</script>

<style>
	.tabs {
		display: flex;
		width: 100%;
		background-color: #fff;
		color: #000;
		justify-content: space-around;
		border-bottom: #e0e0e0;
	}
	
	.tabs > view, .tab-item {
		flex: 1;
		height: 40px;
		line-height: 40px;
		font-size: 14px;
		text-align: center;
	}
	
	.active {
		color: #007AFF;
		border-bottom: 2px solid #007AFF;
	}
</style>
